import { Form, Input, Modal, Select } from "antd";
import React from "react";
import { connect } from "dva";
import { isMobile, isEmail, isIDCard } from "@/utils/utils";

const FormItem = Form.Item;
const { Option } = Select;

const formItemLayout = {
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 }
  },
  labelCol: {
    xs: { span: 22 },
    sm: { span: 6 }
  }
};
@connect(({ global, companyUserManage }) => ({
  listZbCompany: companyUserManage.listZbCompany,
  companyDepartmentList: global.companyDepartmentList
}))
class CreateUpdateForm extends React.Component {
  static defaultProps = {
    formVals: {}
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.getListZbCompany();
  }
  getListZbCompany = () => {
    this.props.dispatch({
      type: "companyUserManage/getListZbCompany"
    });
  };
  handleChangeSelect = companyId => {
    this.props.dispatch({
      type: "global/getCompanyDepartmentList",
      payload: { companyId }
    });
    this.props.form.setFieldsValue({
      companyDepartmentId: ""
    });
  }

  okHandle = () => {
    const { form, onSubmit, formVals } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      onSubmit({
        ...fieldsValue,
        id: formVals.id
      });
    });
  };

  render() {
    const { modalVisible, form, onCancel, formVals, listZbCompany, companyDepartmentList } = this.props;
    return (
      <Modal
        destroyOnClose
        title="个人用户"
        visible={modalVisible}
        onOk={this.okHandle}
        onCancel={() => onCancel()}
        cancelText="取消"
        okText="确认"
      >
        <FormItem label="姓名" {...formItemLayout}>
          {form.getFieldDecorator("name", {
            rules: [{ required: true, message: "请输入姓名" }],
            initialValue: formVals.name
          })(<Input allowClear placeholder="请输入姓名" maxLength={10} />)}
        </FormItem>

        <FormItem label="手机号码" {...formItemLayout}>
          {form.getFieldDecorator("mobile", {
            rules: [
              { required: true, message: "请输入手机号码", pattern: isMobile }
            ],
            initialValue: formVals.mobile
          })(<Input allowClear placeholder="请输入手机号码" maxLength={11} />)}
        </FormItem>

        <FormItem label="邮箱" {...formItemLayout}>
          {form.getFieldDecorator("emailAddress", {
            rules: [
              { required: true, message: "请输入邮箱", pattern: isEmail }
            ],
            initialValue: formVals.emailAddress
          })(<Input allowClear placeholder="请输入邮箱" />)}
        </FormItem>

        <FormItem label="身份证号" {...formItemLayout}>
          {form.getFieldDecorator("idNumber", {
            rules: [
              { required: true, message: "请输入身份证号", pattern: isIDCard }
            ],
            initialValue: formVals.idNumber
          })(<Input allowClear placeholder="请输入身份证号" maxLength={18} />)}
        </FormItem>

        <FormItem label="所属公司" {...formItemLayout}>
          {form.getFieldDecorator("companyId", {
            initialValue: formVals.companyId
          })(
            <Select
              allowClear
              showSearch
              style={{ width: "100%" }}
              placeholder="请输入发布公司"
              optionFilterProp="children"
              onChange={this.handleChangeSelect}

            >
              {listZbCompany.map(item => (
                <Option
                  key={item.zbCompanyResponse.id}
                  value={item.zbCompanyResponse.id}
                >
                  {item.zbCompanyResponse.name}
                </Option>
              ))}
            </Select>
          )}
        </FormItem>

        <FormItem label="所属部门" {...formItemLayout}>
          {form.getFieldDecorator("companyDepartmentId", {
            initialValue: formVals.companyDepartmentId
          })(
            <Select
              allowClear
              showSearch
              style={{ width: "100%" }}
              placeholder="请输入所属部门"
              optionFilterProp="children"
            >
              {companyDepartmentList?.map((item) => (
                <Option value={item.id}>{item.name}</Option>
              ))}
            </Select>
          )}
        </FormItem>
      </Modal>
    );
  }
}

export default Form.create()(CreateUpdateForm);
